<template>
    <div class="description-container">
        <div class="description-item" v-for="(label, index) in labels" :key="index">
            <div class="item-label">
                {{ label.name }}
            </div>
            <div class="item-value ellipsis">
                {{ label.render ? label.render(data[label.key]) :
               data[label.key] }}
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: '',
    components: {

    },
    mixins: [],
    props: {
        labels: Array,
        data: Object
    },
    data() {
        return {
        }
    },
    computed: {

    },
    watch: {
        data(){
            console.log('this.', this.data)
        }
    },
    mounted() {

        console.log('label', this.labels);
        console.log('data', this.data)
    },
    methods: {

    }
};
</script>
<style lang='scss' scoped>
.description-container{
    width: 100%;
    border: #e6e6e6 1px solid ;
    overflow: hidden;
}
.description-item{
    float: left;
    width: 50%;
    display: flex;
}

.item-label{
    width: 100px;
    background-color: #f8f8f8;
    border-right: #e6e6e6 1px solid ;
    border-bottom: #e6e6e6 1px solid ;
    text-indent: 1;
    padding: 15px 5px;
    box-sizing: border-box;
}
.item-value{
    flex: 1;
    border-right: #e6e6e6 1px solid ;
    border-bottom: #e6e6e6 1px solid ;
    text-indent: 1;
    padding: 15px 5px;
    box-sizing: border-box;
}
.ellipsis {
  white-space: nowrap; /* 确保文本在一行内显示 */
  overflow: hidden; /* 隐藏溢出的内容 */
  text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
}
</style>